import { Dimensions, Platform, StyleSheet, Text, View } from "react-native";
import FastImage from "react-native-fast-image";
import { __formatNumber } from "../common/utils";

const screenWidth = Dimensions.get("window").width;
const SwiperPipeItem = ({ item }: any) => {
  return (
    <View
      style={{
        justifyContent: "flex-start",
        width: screenWidth,
      }}
    >
      <View style={styles.swiperContentView}>
        <FastImage
          resizeMode="cover"
          style={[styles.coverImage, { transform: [{ rotate: "-5deg" }] }]}
          source={{ uri: item.cover }}
        ></FastImage>
        <View style={styles.rightView}>
          <View>
            <Text
              numberOfLines={1}
              style={[
                { color: "white", fontWeight: "bold", fontSize: 15 },
                styles.shadowLabel,
              ]}
            >
              {item.name}
            </Text>
            <Text
              numberOfLines={1}
              style={[
                { marginTop: 6, color: "rgba(255,255,255,0.54)", fontSize: 13 },
                styles.shadowLabel,
              ]}
            >
              {item.summary}
            </Text>
          </View>
          <Text
            style={[
              { color: "rgba(255,255,255,0.6)", fontSize: 14 },
              ,
              styles.shadowLabel,
            ]}
          >
            {__formatNumber(item.useNum)}互动
          </Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  swiperContentView: {
    backgroundColor: "rgba(255,255,255,0.1)",
    borderWidth: 0.5,
    borderColor: "rgba(255,255,255,0.12)",
    height: 100,
    width: screenWidth - 56,
    marginHorizontal: 16,
    borderRadius: 10,
    marginTop: 15,
    flexDirection: "row",
    justifyContent: "space-between",
  },

  coverImage: {
    width: 70,
    height: 103,
    borderRadius: 10,
    marginTop: -10,
    marginLeft: 10,
  },

  rightView: {
    flex: 1,
    justifyContent: "space-between",
    marginHorizontal: 10,
    marginVertical: 10,
  },

  shadowLabel: {
    ...Platform.select({
      ios: {
        textShadowOffset: { width: 0, height: 0 },
        textShadowColor: "black",
        textShadowRadius: 1,
        shadowOpacity: 0.1,
      },
      android: {
        elevation: 1,
        textShadowOffset: { width: 1, height: 1 },
        textShadowColor: "rgba(0,0,0,0.3)",
        textShadowRadius: 1,
        shadowOpacity: 1,
      },
    }),
  },
});

export default SwiperPipeItem;
